<template>
	<view class="pos-order-list" style="padding-bottom: 100rpx;" ref="container">
		<view style="width: 100%;position: fixed;top: 0;left: 0;height: 50rpx;line-height: 50rpx;background: #fff;font-size: 24rpx;text-align: center;color: #E93323;">
			*由于多规格属性复杂目前手机端仅支持单规格商品添加编辑
		</view>
		<view class="nav acea-row row-around row-middle" style="top: 50rpx;">
			<view class="item" :class="where.type == 1 ? 'on' : ''" @click="changeStatus(1)">
				出售中
			</view>
			<view class="item" :class="where.type == 2 ? 'on' : ''" @click="changeStatus(2)">
				仓库中
			</view>
			<view class="item" :class="where.type == 3 ? 'on' : ''" @click="changeStatus(3)">
				已售罄
			</view>
			<view class="item" :class="where.type == 5 ? 'on' : ''" @click="changeStatus(5)">
				回收站
			</view>
			<view class="item" :class="where.type == 6 ? 'on' : ''" @click="changeStatus(6)">
				待审核
			</view>
			<view class="item" :class="where.type == 7 ? 'on' : ''" @click="changeStatus(7)">
				未通过
			</view>
		</view>
		<view class="list" style="margin-top: 150rpx;">
			<view class="item" v-for="(item, index) in list" :key="index">
				<view class="pos-order-goods" @click="toDetail(item)">
					<view class="goods acea-row row-between-wrapper">
						<view class="picTxt acea-row row-between-wrapper">
							<view class="pictrue">
								<image :src="item.image" />
							</view>
							<view class="text acea-row row-between row-column">
								<view class="info line2">
									{{ item.store_name }}
								</view>
							</view>
						</view>
						<view class="money">
							<view class="x-money">￥{{ item.price }}</view>
							<view class="num">x{{ item.stock }}</view>
							<view class="y-money">
								￥{{ item.ot_price }}
							</view>
						</view>
					</view>
				</view>
				<view class="operation acea-row row-between-wrapper">
					<view class="more"></view>
					<view class="acea-row row-middle">
						<navigator v-if="!item.spec_type" :url="'/pages/admin/goodsEdit/index?id=' + item.product_id" hover-class="none" class="bnt">编辑</navigator>
						<view v-if="where.type == 1" @click="goodsStatus(item.product_id, 0)" hover-class="none" class="bnt">下架</view>
						<view v-if="where.type == 2" @click="goodsStatus(item.product_id, 1)" hover-class="none" class="bnt">上架</view>
						<view v-if="where.type == 2 || where.type == 6 || where.type == 7" @click="goodsDel(item.product_id)" hover-class="none" class="bnt">回收站</view>
						<view v-if="where.type == 5" @click="goodsRes(item.product_id)" hover-class="none" class="bnt">恢复</view>
						<view v-if="where.type == 5" @click="goodsDelete(item.product_id)" hover-class="none" class="bnt">删除</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="!list.length">
			<image src='../../../static/images/noCart.png' style="margin: 0 auto;width: 414rpx;height: 336rpx;display: block;"></image>
		</view>
		<Loading :loaded="loaded" :loading="loading"></Loading>
		<view style="position: fixed;left: 0;bottom: 20rpx;width: 100%;height: 80rpx;line-height: 80rpx;color: #fff;text-align: center;">
			<navigator url="/pages/admin/goodsEdit/index" style="width: 660rpx;margin: 0 auto;border-radius: 60rpx;" hover-class="none" class="bg-color">
				添加商品
			</navigator>
		</view>
	</view>
</template>

<script>
	import {
		getGoodsList,
		setGoodsStatus,
		setGoodsDel,
		setGoodsRes,
		setGoodsDelete,
	} from "@/api/admin";
	import Loading from '@/components/Loading/index'
	export default {
		name: "AdminGoodsList",
		components: {
			Loading
		},
		data() {
			return {
				current: "",
				types: 1,
				where: {
					page: 1,
					limit: 10,
					type: 1
				},
				list: [],
				loaded: false,
				loading: false,
				orderInfo: {},
				status: ""
			};
		},
		watch: {
			"$route.params.types": function(newVal) {
				let that = this;
				if (newVal != undefined) {
					that.where.type = newVal;
					that.init();
				}
			},
			types: function() {
				this.getIndex();
			}
		},
		onLoad(option) {
			this.current = "";
			this.getIndex();
		},
		methods: {
			// 获取数据
			getIndex: function() {
				let that = this;
				if (that.loading || that.loaded) return;
				that.loading = true;
				getGoodsList(that.where).then(
					res => {
						that.loading = false;
						that.loaded = res.data.list.length < that.where.limit;
						that.list.push.apply(that.list, res.data.list);
						that.where.page = that.where.page + 1;
					},
					err => {
						that.$util.Tips({title: err});
					}
				);
			},
			// 初始化
			init: function() {
				this.list = [];
				this.where.page = 1;
				this.loaded = false;
				this.loading = false;
				this.getIndex();
				this.current = "";
			},
			// 导航切换
			changeStatus(val) {
				if (this.where.type != val) {
					this.where.type = val;
					this.init();
				}
			},
			toDetail(item){
				if (item.status == 1) {
					uni.navigateTo({
						url:`/pages/goods_details/index?id=${item.product_id}`
					})
				}
			},
			goodsStatus(id, status){
				let that = this;
				setGoodsStatus(id, status)
				.then(res => {
					that.init();
					that.$util.Tips({title: res.message});
				})
				.catch(err => {
					that.$util.Tips({title: err});
				});
			},
			goodsDel(id){
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确认将商品转入回收站?',
					success: function(res) {
						if (res.confirm) {
							setGoodsDel(id)
							.then(res => {
								that.init();
								that.$util.Tips({title: res.message});
							})
							.catch(err => {
								that.$util.Tips({title: err});
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			goodsRes(id){
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确认恢复商品?',
					success: function(res) {
						if (res.confirm) {
							setGoodsRes(id)
							.then(res => {
								that.init();
								that.$util.Tips({title: res.message});
							})
							.catch(err => {
								that.$util.Tips({title: err});
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			goodsDelete(id){
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确认删除商品，此操作不可恢复?',
					success: function(res) {
						if (res.confirm) {
							setGoodsDelete(id)
							.then(res => {
								that.init();
								that.$util.Tips({title: res.message});
							})
							.catch(err => {
								that.$util.Tips({title: err});
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		},
		onReachBottom() {
			this.getIndex()
		}
	}
</script>

<style>
	.pos-order-list .nav {
		width: 100%;
		height: 96upx;
		background-color: #fff;
		font-size: 30upx;
		color: #282828;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999;
	}

	.pos-order-list .nav .item.on {
		color: #E93323;
	}

	.pos-order-list .list {
		margin-top: 120upx;
	}

	.pos-order-list .list .item {
		background-color: #fff;
		width: 100%;
	}

	.pos-order-list .list .item~.item {
		margin-top: 24upx;
	}

	.pos-order-list .list .item .order-num {
		height: 124upx;
		border-bottom: 1px solid #eee;
		font-size: 30upx;
		font-weight: bold;
		color: #282828;
		padding: 0 30upx;
	}

	.pos-order-list .list .item .order-num .time {
		font-size: 26upx;
		font-weight: normal;
		color: #999;
		margin-top: -40upx;
	}

	.pos-order-list .list .item .operation {
		padding: 20upx 30upx;
		margin-top: 3upx;
		border-top: 1px solid #f2f2f2;
	}

	.pos-order-list .list .item .operation .more {
		position: relative;
	}

	.pos-order-list .list .item .operation .icon-gengduo {
		font-size: 50upx;
		color: #aaa;
	}

	.pos-order-list .list .item .operation .order .arrow {
		width: 0;
		height: 0;
		border-left: 11upx solid transparent;
		border-right: 11upx solid transparent;
		border-top: 20upx solid #e5e5e5;
		position: absolute;
		left: 15upx;
		bottom: -18upx;
	}

	.pos-order-list .list .item .operation .order .arrow:before {
		content: '';
		width: 0;
		height: 0;
		border-left: 7upx solid transparent;
		border-right: 7upx solid transparent;
		border-top: 20upx solid #fff;
		position: absolute;
		left: -7upx;
		bottom: 0;
	}

	.pos-order-list .list .item .operation .order {
		width: 200upx;
		background-color: #fff;
		border: 1px solid #eee;
		border-radius: 10upx;
		position: absolute;
		top: -100upx;
		z-index: 9;
	}

	.pos-order-list .list .item .operation .order .items {
		height: 77upx;
		line-height: 77upx;
		text-align: center;
	}

	.pos-order-list .list .item .operation .order .items~.items {
		border-top: 1px solid #f5f5f5;
	}

	.pos-order-list .list .item .operation .bnt {
		font-size: 28upx;
		color: #5c5c5c;
		width: 170upx;
		height: 60upx;
		border-radius: 30upx;
		border: 1px solid #bbb;
		text-align: center;
		line-height: 60upx;
		box-sizing: border-box;
	}

	.pos-order-list .list .item .operation .bnt~.bnt {
		margin-left: 14upx;
	}

	.pos-order-goods {
		padding: 0 30upx;
		background-color: #fff;
	}

	.pos-order-goods .goods {
		height: 185upx;
	}

	.pos-order-goods .goods~.goods {
		border-top: 1px dashed #e5e5e5;
	}

	.pos-order-goods .goods .picTxt {
		width: 515upx;
	}

	.pos-order-goods .goods .picTxt .pictrue {
		width: 130upx;
		height: 130upx;
	}

	.pos-order-goods .goods .picTxt .pictrue image {
		width: 100%;
		height: 100%;
		border-radius: 6upx;
	}

	.pos-order-goods .goods .picTxt .text {
		width: 365upx;
		height: 130upx;
	}

	.pos-order-goods .goods .picTxt .text .info {
		font-size: 28upx;
		color: #282828;
	}

	.pos-order-goods .goods .picTxt .text .attr {
		font-size: 24upx;
		color: #999;
	}

	.pos-order-goods .goods .money {
		width: 164upx;
		text-align: right;
		font-size: 28upx;
	}

	.pos-order-goods .goods .money .x-money {
		color: #282828;
	}

	.pos-order-goods .goods .money .num {
		color: #ff9600;
		margin: 5upx 0;
	}

	.pos-order-goods .goods .money .y-money {
		color: #999;
		text-decoration: line-through;
	}

	.public-total {
		font-size: 28upx;
		color: #282828;
		border-top: 1px solid #eee;
		height: 92upx;
		line-height: 92upx;
		text-align: right;
		padding: 0 30upx;
		background-color: #fff;
	}

	.public-total .money {
		color: #ff4c3c;
	}
</style>
